import React,{Component} from 'react'
import {connect} from 'react-redux'
import {Card} from 'antd';
import {getCateGoryData,getDataByCategory} from '../../store/actionCreator'
import {Link} from 'react-router-dom'
class Category extends Component{
    constructor(){
        super();
        this.state = {
            indexs:6,
            show:true,
        }
        
    }
    componentDidMount(){
        this.props.getCategoryData();
        //console.log(this.props.categoryList.toJS())
    }
    handleShow(){
        if(this.state.show){
            this.setState({
                show:!this.state.show,
                indexs:1000
            });
        }else{
            this.setState({
                show:!this.state.show,
                indexs:6
            });
        }
        
    }
    render(){
        return(
            <React.Fragment>
                <Card size="small" title="分类"  style={{marginTop:10 }}>
                    {
                        this.props.categoryList.toJS().map((item,index)=>{
                            return (
                                index<this.state.indexs?<React.Fragment><Link to={'/myblog/categore/'+item.cate} style={{color:'#777',textDecoration:'none'}} onClick={()=>{this.props.getDataByCategory(item.cate)}}>
                                <p key={index}>{item.cate}<p style={{float:"right",marginRight:10}}>{item.num}  篇</p></p></Link></React.Fragment>:null
                            )
                        })
                        
                    }
                    {this.state.show?<p style={{textAlign:'center',color:'#777',cursor:'pointer' }} onClick={()=>{this.handleShow()}}>展开<i className="iconfont" ref={(icon)=>{this.spinIcon = icon}}>&#xe600;</i></p>:<p style={{textAlign:'center',color:'#777',cursor:'pointer' }} onClick={()=>{this.handleShow()}}>收起<i className="iconfont" ref={(icon)=>{this.spinIcon = icon}}>&#xe606;</i></p>}
                </Card>
            </React.Fragment>
        )
    }
}
const mapStateToProps = (state)=>{
    return{
       categoryList:state.get('category').get('CategoryList'),
    }
}

const mapDispatchToProps = (dispatch)=>{
    return{
        getCategoryData(){
            var action = getCateGoryData();
            dispatch(action);
        },
        getDataByCategory(data){
            var action = getDataByCategory(data);
            dispatch(action);
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Category);